<div id="js-channel-map" class="p-channel-map is-closed">
  <div id="channel-map-install" class="p-channel-map__tab">
    <div class="p-strip--light is-shallow">
      <div class="u-fixed-width">
        <p class="p-heading--four">Install {{ default_track }}/{{ lowest_risk_available }} of {{ snap_title }}</p>
        <label>Ubuntu 16.04 or later?</label>
        <button
          data-snap="{{ package_name }}
            {% if lowest_risk_available != 'stable' %}
              ?channel={{ default_track }}/{{ lowest_risk_available }}
            {% endif %}"
          class="p-view-store-button"
          data-js="open-desktop">
            View in Desktop store
        </button>
        <p class="p-form-help-text">Make sure <a href="/docs/installing-snapd">snap support</a> is enabled in your Desktop store.</p>
      </div>
      <div class="u-fixed-width">
        <hr />
      </div>
      <div class="u-fixed-width">
        <p><b>Install using the command line</b></p>
        <div class="p-code-copyable p-cli-install">
          <input
            class="p-code-copyable__input"
            id="snap-install"
            value="{{ install_snippet(
                  package_name, default_track, lowest_risk_available, confinement
                  ) }}"
            readonly="readonly"
          />
          <button
            class="p-code-copyable__action js-clipboard-copy"
            data-clipboard-target="#snap-install">
            Copy to clipboard
          </button>
        </div>
        <p class="p-form-help-text">
          Don't have snapd? <a href="/docs/installing-snapd">Get set up for snaps</a>.
        </p>
      </div>
    </div>
  </div>
  <div id="channel-map-versions" class="p-channel-map__tab">
    <div class="p-channel-map__slides show-left">
      <div class="p-strip is-shallow p-channel-map__slide u-no-padding--bottom" data-js="channel-map-options">
        <div class="u-fixed-width">
          <form class="p-form--inline p-channel-map__form">
            <div class="p-form__group">
              <label class="p-form__label">
                Options to install this snap
              </label>
            </div>
            <div class="channel-map-arch-field p-form__group">
              <label for="channel-map-track-select" class="p-form__label">
                Show architecture
              </label>
              <div class="p-form__control">
                <select id="channel-map-architecture-select" data-js="arch-select" class="p-channel-map-arch-select">
                </select>
              </div>
            </div>
          </form>
        </div>
        <div class="u-fixed-width" data-js="channel-map-tabs">
          <nav class="p-tabs">
            <ul class="p-tabs__list" role="tablist">
              <li class="p-tabs__item" role="presentation">
                <a
                  href="#"
                  class="p-tabs__link"
                  role="tab"
                  data-tab="overview"
                  data-js="switch-tab"
                  aria-selected="true">
                    Overview
                </a>
              </li>
              <li class="p-tabs__item" role="presentation">
                <a
                  href="#"
                  class="p-tabs__link"
                  role="tab"
                  data-tab="all"
                  data-js="switch-tab">
                    All releases
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <div class="u-fixed-width p-channel-map__version-table">
          <table>
            <thead>
              <tr>
                <th>Channel</th>
                <th>Version</th>
                <th width="25%" class="u-hide--medium u-hide--small">Published</th>
                <th width="12%"></th>
              </tr>
            </thead>
            <tbody data-js="channel-map-table">
            </tbody>
          </table>
        </div>
      </div>
      <div class="p-strip--light is-shallow p-channel-map__slide" data-js="channel-map-install-details">
      </div>
    </div>
  </div>
</div>
<script type="text/template" id="install-window-template" data-js="install-window">
  <div class="u-fixed-width">
    <a href="#" data-js="slide-all-versions">&lsaquo; All versions</a>
  </div>
  <div class="u-fixed-width">
    <p class="p-heading--four">Install ${channel} of {{ snap_title }}</p>
    <label>Ubuntu 16.04 or later?</label>
    <button data-snap="{{ package_name }}?channel=${channel}" class="p-view-store-button" data-js="open-desktop">View in Desktop store</button>
    <p class="p-form-help-text">Make sure <a href="/docs/installing-snapd">snap support</a> is enabled in your Desktop store.</p>
  </div>
  <div class="u-fixed-width">
    <hr />
  </div>
  <div class="u-fixed-width">
    <p><b>Install using the command line</b></p>
    <div class="p-code-copyable p-cli-install">
      <input
        class="p-code-copyable__input"
        id="snap-install-alt"
        value="sudo snap install {{ package_name }}${paramString}"
        readonly="readonly"
      />
      <button
        class="p-code-copyable__action js-clipboard-copy"
        data-clipboard-target="#snap-install-alt">
        Copy to clipboard
      </button>
    </div>
    <p class="p-form-help-text">
      Don't have snapd? <a href="/docs/installing-snapd">Get set up for snaps</a>.
    </p>
  </div>
</script>
<script type="text/template" id="channel-map-row-template" data-js="channel-map-row">
  <tr class="${rowClass}" data-js="slide-install-instructions" data-channel="${row[0]}/${row[1]}" data-confinement="${row[4]}">
    <td>${row[0]}/${row[1]}</td>
    <td>${row[2]}</td>
    <td class="u-hide--medium u-hide--small">${row[3]}</td>
    <td class="u-align--center"><a href="#" class="p-channel-map__version-table-install">Install &rsaquo;</a></td>
  </tr>
</script>
<div class="p-channel-map-overlay" data-js="close-channel-map" style="display: none"></div>
